<template>
  <div class="bock">
    <div class="radio">
      <el-radio-group v-model="radio5">
        <el-radio-button label="个人用户注册"></el-radio-button>
        <el-radio-button label="单位用户注册"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="form">
      <el-form ref="form" :model="form" label-width="160px">
        <div class="label">
          <img src="../../assets/zhxx.png" alt="" />
          账号信息
        </div>
        <el-form-item label="用户名">
          <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.name" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.name" placeholder="请确认密码"></el-input>
        </el-form-item>
        <div class="label">
          <img src="../../assets/dwxx.png" alt="" />
          单位信息
        </div>
        <el-form-item label="单位类型">
          <el-select v-model="form.region" placeholder="请选择单位类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input v-model="form.name" placeholder="请输入单位名称"></el-input>
        </el-form-item>
        <el-form-item label="单位属性">
          <el-select v-model="form.region" placeholder="请选择单位属性">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统一社会信用代码">
          <el-input
            v-model="form.name"
            placeholder="请输入统一社会信用代码"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位地址">
          <el-input v-model="form.name" placeholder="请输入单位地址"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入单位地址"
            v-model="form.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :limit="1"
          >
            <!-- <i class="el-icon-plus"></i> -->
            <img
              v-if="dialogImageUrl == ''"
              src="../../assets/sfz1.png"
              alt=""
              style="margin-top: 8px; width: 320px; height: 186px"
            />
          </el-upload>
        </el-form-item>
        <div class="label">
          <img src="../../assets/yhxx.png" alt="" />
          用户信息
        </div>
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="form.name" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="人员类型">
          <el-select v-model="form.region" placeholder="请选择人员类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.name" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="身份证正面">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :limit="1"
          >
            <!-- <i class="el-icon-plus"></i> -->
            <img
              v-if="dialogImageUrl == ''"
              src="../../assets/sfz1.png"
              alt=""
              style="margin-top: 8px; width: 320px; height: 186px"
            />
          </el-upload>
        </el-form-item>
         <el-form-item label="身份证反面">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :limit="1"
          >
            <!-- <i class="el-icon-plus"></i> -->
            <img
              v-if="dialogImageUrl == ''"
              src="../../assets/sfz2.png"
              alt=""
              style="margin-top: 8px; width: 320px; height: 186px"
            />
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即注册</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio5: "个人用户注册",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file, "9999");
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped>
.bock {
  background-color: #fff;
  margin-bottom: 20px;
}
.radio {
  width: 100%;
  padding: 40px 0;
  text-align: center;
}
.form {
  width: 100%;
  display: flex;
  justify-content: center;
}
.form .label {
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  font-weight: 600;
  margin-bottom: 20px;
}
.form .label img {
  vertical-align: middle;
  margin-bottom: 4px;
}
/deep/ .el-radio-button__inner {
  padding: 8px 20px;
}
/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #0065ff;
  border-color: #0065ff;
}
/deep/ .el-input {
  border: none !important;
  border-radius: 3px !important;
}
/deep/ .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 16px !important;
  font-size: 16px !important;
  color: #999999 !important;
  border: 1px solid rgba(204, 204, 204, 1) !important;
}

/deep/ .el-textarea {
  border-radius: 3px !important;
}
/deep/ .el-textarea__inner {
  color: #999999 !important;
  border: 1px solid rgba(204, 204, 204, 1) !important;
}
/deep/ .el-select {
  width: 100%;
}
/deep/ .el-form {
  width: 40%;
}
/deep/ .el-upload--picture-card {
  width: 320px;
  height: 186px;
  border: none;
  background-color: #fff;
}
/deep/ .el-button--primary{
    background-color: #2E6BE6;
    border: 1px solid rgba(46,107,230,1);
border-radius: 3px;
}
/deep/ .el-button{
    height: 40px;
    width: 160px;
}
</style>